

import React ,{useEffect}from 'react'
import { Col, Row, Typography, Input, Button, Checkbox, Form, InputNumber } from 'antd';
import { ajax } from '../../api';
import produce from '../../mobx/store/produce';
import { observer } from 'mobx-react';


const { Title } = Typography
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

function ProdecesAdd() {
    const [form] = Form.useForm()
    const {producelist,cproducelist,getproducelist,sproduce} = produce

    useEffect(()=>{
        cproducelist({}) 
    },[])

    const onFinish = async (value: any) => {
        console.log(value);

        value.key=producelist.length+1
        
        let { code, result }: any = await ajax.addproduce(value)
        if (code == 200) {
            // history.push('/main/produce/list')
        }
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const onReset = () => { //重置
        form.resetFields()
    }

    return (
        <div style={{ width:"80%", border: "2px solid #888", borderRadius: "20px", padding: "30px", backgroundColor: "snow", margin: "50px 100px" }}>
            <Title level={4} style={{ margin: "10px 0 30px 55px", fontWeight: '500' }}>添加商品</Title>
            <Row>
                <Col span={16} >
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="商品名称"
                            name="pname"
                            rules={[{ required: true, message: '请输入你喜欢的商品' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item name="pnum" label="商品库存" rules={[{ required: true, message: '请确定好数量哦 !' }]}>
                            <InputNumber min={1} max={500} />
                        </Form.Item>

                        <Form.Item label="商品价格" name="price">
                            <Input defaultValue='￥  ' />
                        </Form.Item>

                        <Form.Item label="活动价" name="discount">
                            <Input defaultValue='￥  ' />
                        </Form.Item>
                       

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }} >

                            <Button type="primary" htmlType="submit"
                                style={{ marginRight: 20, backgroundColor: "orange", border: "none" }}
                            >添加商品</Button>

                            <Button htmlType="button" onClick={onReset}>重置</Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>

        </div>
    )
}


export default observer(ProdecesAdd)